<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>月消费概况页面</title>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/jquery-easyui-1.8.8/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/jquery-easyui-1.8.8/themes/icon.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/jquery-easyui-1.8.8/themes/color.css">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/jquery-easyui-1.8.8/jquery.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/jquery-easyui-1.8.8/jquery.easyui.min.js"></script>
</head>
<body>

	<!-- 在页面中使用easy ui组件进行界面编程 -->
	<!-- 数据表格组件 -->
	<table id="spends_dg" title="月消费概况管理" class="easyui-datagrid"
		style="width: 700px; height: 500px"
		url="${param.request.contextPath}/spends/list"
		toolbar="#spends_toolbar" pagination="true" rownumbers="true"
		fitColumns="true" singleSelect="true">
		<thead>
			<tr>
				<!-- field="goId"要对应实体类 -->
				<th field="cardId" width="50">卡号</th>
				<th field="costPlace" width="50">消费地点</th>
				<th field="times" width="50">消费时间</th>
				<th field="cost" width="50">金额</th>
				<th field="type" width="50">支出或充值</th>
			</tr>
		</thead>
	</table>

	<!-- 工具条组件 -->
	<div id="spends_toolbar">
		<a href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-add" plain="true" onclick="newSpends()">新增消费概况</a> <a
			href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-edit" plain="true" onclick="editSpends()">修改消费概况</a> <a
			href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-remove" plain="true" onclick="destroySpends()">删除消费概况</a>
	</div>

	<!-- 新增和修改表单 start-->
	<div id="spends_dlg" class="easyui-dialog"
		style="width: 400px; height: 280px; padding: 10px 20px" closed="true"
		buttons="#spends_dlg-buttons">
		<div class="ftitle">月消费概况管理</div>
		<form id="spends_fm" method="post">
			<div class="fitem">
				<!-- name="admName"要和实体类名称一致 -->
				<label> 卡号:</label> <input name="cardId" class="easyui-validatebox"
					required="true">
			</div>
			<div class="fitem"> 
				<!-- name="admPassword"要和实体类名称一致 -->
				<label> 消费地点:</label> <input name="costPlace"
					class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<!-- name="admPassword"要和实体类名称一致 -->
				<label>消费时间:</label> <input name="times" class="easyui-validatebox"
					required="true">
			</div>
			<div class="fitem">
				<!-- name="admPassword"要和实体类名称一致 -->
				<label>金额:</label> <input name="cost" class="easyui-validatebox"
					required="true">
			</div>
			<div class="fitem">
				<!-- name="admPassword"要和实体类名称一致 -->
				<label>支出或充值:</label> <input name="cost" id="cost" class="easyui-validatebox"
					required="true">
			</div>
		</form>
	</div>

	<div id="spends_dlg-buttons">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok"
			onclick="saveSpends()">保存</a> <a href="#" class="easyui-linkbutton"
			iconCls="icon-cancel"
			onclick="javascript:$('#spends_dlg').dialog('close')">取消</a>
	</div>
	
	<!-- 新增和修改表单 end-->
	<script type="text/javascript">
		function tehFormatter(value, row, index) {
			return row.spends.cardId;
		}
		function tehFormatter(value, row, index) {
			return row.spends.costPlace;
		}
		function tehFormatter(value, row, index) {
			return row.spends.times;
		}

	      
		function loadCost(){
			$('#cost').combox({
				data:[{
					"costId":0,
					"costName":"支出"
					},
					{
					"costId":1,
					"costName":"充值"
					}
					],
					valueField:'costId',
					textField:'costName',
					required:'true'
				});
		}
		

		
		function tehFormatter(value, row, index) {
			if(value=="0"){
				return "支出";
				}
			if(value=="1"){
				return "充值"
				}
		}
		
		function newSpends() {
			$('#spends_dlg').dialog('open').dialog('setTitle', '新增消费概况');
			$('spends_fm').form('clear');
			url = '${param.request.contextPath}/spends/add';
			loadCost();
		}

		
		function editSpends() {
			var row = $('#spends_dg').datagrid('getSelected');
			if (row) {
				$('#spends_dlg').dialog('open').dialog('setTitle', '修改消费概况');
				$('spends_fm').form('load', row);
				url = '${param.request.contextPath}/spends/edit?cardId='+ row.cardId;
				loadCost();
			}
			
		}

		
		function destroySpends(){
			var row = $('#spends_dg').datagrid('getSelected');
			if(row){
				$.messager.confirm('Confirm','是否删除该消费概况？',function(r){
					if(r){
						$.post('${param.request.contextPath}/spends/delete',{
							cardId : row.cardId
							},function(result){
								if(result.success){
									$('#spends_dg').datagrid('reload');
									}else{
										$.messager.show({
											title:'提示',
											msg:result.errorMsg
											});
										}
								},'json');
						}
					});
				}
			}
		function saveSpends(){
			$('spends_fm').form('submit',{
				url : url,
				onSubmit:function(){
					return $(this).form('validate');
					},
					success : function(result){
						var result = eval('('+result+')');
						if(result.errorMsg){
							$.messager.show({
								title : '提示',
								msg : result.errorMsg
								});
							}else{
								$('spends_dlg').dialog('close');
								$('spends_dg').datagrid('reload');
								}
						}
				});
			}
	</script>

</body>
</html>